<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-08-30 11:53:19
 * @LastEditTime: 2023-11-04 10:29:52
-->
<!--网络地址图片加载组件-->
<template>
    <div class="demo-image__lazy">
        <el-image :key="src == null ? '' : src" :src="src == null ? '' : src" :id="id" :preview-src-list="srcList">
            <slot></slot>
            <template #error>
                <div class="imageSlot">
                    <img :src="falseSrc" class="imageFalse2"
                        v-if="falseSrc != require('../../assets/images/imgLoadFalse.svg')" />
                    <img :src="falseSrc" class="imageFalse1"
                        v-if="falseSrc == require('../../assets/images/imgLoadFalse.svg')" />
                </div>
            </template>
            <template #placeholder>
                <div class="loadSlot" v-loading="true" element-loading-text="Loading...">
                </div>
            </template>
        </el-image>
    </div>
</template>
    
<script>
export default {
    name: 'HomeView',
    props: {
        src: {
            default: ""
        },
        falseSrc: {
            default: require('../../assets/images/imgLoadFalse.svg')
        },
        id: {
            default: 'img9217u98'
        },
        list:{
            default:[]
        }
    },
    data() {
        return {

        }
    },
    mounted() {
    },
    methods: {

    },
    watch: {

    },
    computed: {
        srcList(){
            if(this.list.length==0){
                return [this.src]
            }else{
                return this.list
            }
            
        }
    }
}
</script>
    
<style scoped>
.demo-image__lazy {
    overflow-y: auto;
}

.demo-image__lazy .el-image {
    display: block;
    height: inherit;
    width: inherit;
}

.demo-image__lazy .el-image:last-child {
    margin-bottom: 0;
}

.loadSlot {
    background-color: #f5f7fa;
    height: inherit;
    width: inherit;
}

.imageSlot {
    background-color: #f5f7fa;
    height: inherit;
    width: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.imageFalse1 {
    width: 30%;
    height: 30%;
}

.imageFalse2 {
    height: inherit;
    width: inherit;
}</style>